<template>
  <view class="findSearch">
    <cu-custom bgColor="bgcolorfff" :isBack="true">
      <block slot="content">
        <view class="toptext">搜索</view>
      </block>
    </cu-custom>

    <!-- 历史搜索记录 -->
    <view class="search_li">
      <view>
        <text class="lg text-gray" :class="'cuIcon-search text_icon'"></text>
        <input type="text" v-model="text" @confirm="searchNew" />
      </view>
      <text @click="searchNew">搜索</text>
    </view>
    <!-- 瀑布流卡片 -->
    <view class="waterfall_box" v-if="list.length > 0">
      <waterfall :value="list" ref="waterfall" :column="2" :gutter="0">
        <template v-slot="{ item }">
          <view class="waterfall_box_cen">
            <Pullcard
              :boxBorder="false"
              :item="item"
              :showLikeIcon="false"
            ></Pullcard>
          </view>
        </template>
      </waterfall>
    </view>
  </view>
</template>

<script>
import waterfall from "../../conpoments/waterfall";
import Pullcard from "../../conpoments/pullcard";
import { hotClassify } from "../../api/api";
export default {
  data() {
    return {
      list: [],
      searchList: [],
      //历史搜索数据
      hotSearch: [], //热门搜索数据
      text: "", //输入框值
      lastCursor: "", //游标
      over: false,
      hotid: "",
      jumpSearchContant: "",
      ishot: false,
    };
  },
  onReachBottom() {
    console.log("加载");
    if (!this.over) {
      this.ishot == true
        ? this.getSearch(false, true)
        : this.getSearch(false, false);
    }
  },
  methods: {
    searchNew(hot = false) {
      this.over = false;
      this.lastCursor = "";
      this.list = [];
      if (hot == true) {
        //热门搜索不保留搜索记录
        this.getSearch(true, true);
      } else {
        this.getSearch(true);
      }
    },
    getSearch(first = true, hot = false) {
      this.loadingflag = true;
      let parmas = {
        keyword: hot == false ? this.text.toString() : "",
        lastCursor: this.lastCursor,
      };
      //非热门搜索
      if (hot == false) {
        parmas.keyword = this.text.toString();
      }
      //热门搜索
      if (hot == true) {
        parmas.category = this.hotid;
      }
      this.$http(
        {
          url: "/index/search",
          method: "get",
        },
        parmas,
        true
      ).then((res) => {
        this.loadingflag = false;
        if (res[1].data.code === "000000") {
          const { feeds, lastCursor } = res[1].data.data;
          if (lastCursor == -1) {
            //没有数据了
            this.over = true;
            if (first && feeds == null) {
              uni.showToast({
                title: "没有相关内容",
                duration: 1500,
                icon: "none",
              });
            }
            return;
          }
          this.lastCursor = lastCursor;
          if (first) {
            //判断是搜索,还是触底加载
            this.list = feeds;
            //第一次直接赋值
          } else {
            //触底追加数据
            this.$refs.waterfall.append(feeds || []);
          }
        }
      });
    },
  },
  components: {
    waterfall,
    Pullcard,
  },
  onShow() {
    console.log(typeof uni.getStorageSync("search"));
    if (uni.getStorageSync("search").length !== 0) {
      this.searchList = JSON.parse(uni.getStorageSync("search"));
    } else {
      this.searchList = [];
    }
  },
  async onLoad({ search, hotid }) {
    const res = await hotClassify();
    this.loadingflag = false;
    if (res[1].data.code === "000000") {
      this.hotSearch = res[1].data.list;
    }
    this.jumpSearchContant = search || "";
    if (this.jumpSearchContant != "") {
      let hasList = false;
      //有参数说明是从之前的页面跳转的
      for (let index = 0; index < res[1].data.list.length; index++) {
        const element = res[1].data.list[index];
        if (element.name == this.jumpSearchContant) {
          // 热门搜索
          hasList = true;
          this.ishot = true;
          this.hotid = element.id;
          this.searchNew(true);
          break;
        }
      }
      if (hasList == false) {
        this.text = this.jumpSearchContant;
        //普通搜索、
        this.searchNew(false);
      }
    } else {
      this.searchNew(false);
    }
  },
};
</script>

<style scoped lang="scss">
.findSearch {
  width: 100%;
  background-color: #fff;
  height: 100vh;
  -webkit-overflow-scrolling: touch;
}
.search_li {
  width: 100%;
  padding-top: 50rpx;
  padding-left: 32rpx;
  padding-right: 36rpx;
  padding-bottom: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-bottom: 2rpx solid rgba(245, 245, 245, 1);

  view {
    height: 64rpx;
    background: rgba(245, 245, 245, 1);
    border-radius: 32rpx;
    width: 594rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    > input {
      width: 100%;
      height: 100%;
      font-weight: 500;
      color: rgba(142, 142, 142, 1);
      font-size: 28rpx;
    }
  }

  > text {
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(142, 142, 142, 1);
    padding-left: 35rpx;
    white-space: nowrap;
  }
}
.text_icon {
  font-size: 30rpx;
  padding-left: 30rpx;
  padding-right: 15rpx;
}
.waterfall_box {
  margin-top: 20rpx;
  width: 100vw;
  .waterfall_box_cen {
    margin-top: 28rpx;
  }
}
</style>
